/* HOMEPAGE BLOCKS */

@import "mixins";

article.block.small {
	margin: 10px;
	overflow: hidden;
	@media (max-width: 460px) {margin: 5px;}

	&.doublespan {
		height: 130px;
		div {
			height: 100%;
			position: relative;
			background: no-repeat 50%;
			background-size: cover;

			i {
				background: #000;
				display: block;
				width: 100%;
				height: 100%;
				opacity: 0.6;
				
				-webkit-transition: .5s ease-in-out;
			    -moz-transition: .5s ease-in-out;
			    -o-transition: .5s ease-in-out;
			    -transition: .5s ease-in-out;
			}


			a {
				position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				color: #fff;
				z-index: 10;
				h2 {
					text-align: center;
					text-transform: uppercase;
					width: 100%;
					font-size: 16px;
					font-family: @font-default;
					font-weight: 400;
					margin-top: 0;
					line-height: 16px;	
					//Ellispsis
					white-space: nowrap;
					overflow: hidden;	
					text-overflow: ellipsis;		
				}
				span {
					display: inline;
					width: 100%;
					font-weight: 400;
					font-size: 12px;
					&.icon {
						display: block;
						width: 30px;
						height: 30px;
						margin: 0 auto;
						border: 1px solid #fff;
						border-radius: 15px;
						padding: 0px;
						margin-bottom: 6px;
						position: relative;
						&:before {
							font-size: 21px;
							position: absolute;
							left: 50%;
							top: 50%;
							margin-left: -10px;
							margin-top: -11px;
							text-align: center;
						}
					}
				}
				div.post_location {
					width: 100%;
					float: left;
					text-align: center;
					position: relative;
					top: 0;
					height: auto;
     				span.separator {
						display: block;
						border: 1px solid #fff;
						margin: 8px auto;
						width: 31px;
     				}
    			}
				
				.cont-video {
					//display: none;
					-webkit-transition: opacity  .5s ease-in-out;
				    -moz-transition: opacity  .5s ease-in-out;
				    -o-transition: opacity  .5s ease-in-out;
				    -transition: opacity  .5s ease-in-out;
					opacity: 0;
					margin-top: 20px;
				}

				.boxPlay {
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -25px;
					margin-top: -25px;
					

					&:before {
						font-size: 50px;
					}
				}
			}
			&:hover {
				i {
					
				    opacity: 0;
			
				}
				.cont-video {
					//display: block;
					opacity: 1;
					background: url(images/bg_opacity_blue_form_hp.png) repeat 0 0;
					padding: 10px 10px 20px 10px;
					margin: 10px;
					height: auto;
				}

				.boxPlay {
					
					opacity: 0;
				}
    		}

		}
	}

	&.category {
		height: 280px;
		@media (max-width: 460px) {margin: 10px 0;}
		div {
			height: 100%;
			position: relative;
			background: no-repeat 50%;
			background-size: cover;
			a {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 10;
				h2 {
					width: 100%;
					text-align: center;
					color: #f9fbfc;
					font-size: 32px;
					position: absolute;
					font-weight: 700;
					top: 30%;
					font-family: @font-default;
					margin: 0;
					//text-shadow: 1px 1px 8px rgba(57, 57, 57, 1);
					@media (max-width: 767px) {top: 21%;}
					@media (max-width: 460px) {top: 15%;}
				}
				div {
					width: 100%;
					height: 80px;
					position: absolute;
					bottom: 0;
					background-image: url("images/bg_block_small.png");
					background-repeat: repeat-x;
					@media (max-width: 460px) {height: 80px;}
					@media (max-width: 767px) {height: 100px;}
					span {
						display: block;
						color: #fff;
						
						&.left {
							width: 40%;
							float: left;
							text-align: center;
							padding: 10px 18px;
							font-size: 44px;
							height: 100%;
							@media (max-width: 460px) {padding: 20px;}
							@media (max-width: 767px) {padding: 20px;}

							&:before {
								font-size: 60px;
							}
						}
						&.right {
							float: right;
							width: 60%;
							font-size: 14px;
							line-height: 1.2;
							padding: 16px 20px 16px 0;
							overflow: hidden;
							height: 81%;
							font-family: @font-default;
							font-weight: 400;
						}
					}
				}

			}
		
		}
	}

}

article.block.medium {
	height: 195px;
	margin: 10px;
	@media (max-width: 460px) {margin: 5px;}

	div {
		height:100%;
		width: 100%;
		position: relative;
		background: no-repeat 50%;
		background-size: cover;
		a {
			display: block;
			position: absolute;
			z-index: 10;
			height: 100%;
			width: 100%;
			span {
				position: absolute;
				bottom: -11px;
				height: 30px;
				padding: 4px 20px;
				color: #fff;
				font-weight: 400;
				text-transform: uppercase;
				text-align: center;
				right: 15%;
				left: 15%;
				background: #1da3a8;
				font-family: @font-default;
				font-size: 18px;
				@media (max-width: 460px) {
					right: 5%;
					left: 5%;
				}
			}
		}

	}
	
}

article.block.large {
	height: 280px;
	position: relative;
	margin: 10px;
	overflow: hidden;
	@media (max-width: 460px) {margin: 5px;}

	div {
		height:100%;
		position: relative;
		background: no-repeat 50%;
		background-size: cover;

		a {
			display: block;
			width: 100%;
			height: 100%;
			z-index: 10;
			position: absolute;
			color: #fff;
			text-transform: uppercase;
			padding: 13px;
			text-align: center;

			h2 {
				display: block;
				width: 70%;
				height: 45px;
				margin: 0 auto;
				background-image: url("images/bg_block_small.png");
				background-repeat: repeat-x;
				position: relative;
				top: 75%;
				padding: 10px;
				text-align: center;
				font-family: @font-default;
				font-weight: 700;
				font-size: 19px;
			}
		}
	} 

	.location {
		.place {
			position: absolute;
			left: 42%;
			top: 30%;
			padding-bottom: 10px;
			border-bottom: 3px solid #fff;
			height: 90px;
		}
		h2 {
			color: #fff;
			font-weight: 700;
			text-transform: uppercase;
			font-size: 20px;
			text-align: center;
			position: absolute;
			top: 62%;
			width: 100%;
			font-family: @font-default;
		
			span {
				color: #c3c3c4;
				font-weight: 400;
				font-size: 13px;
				display: block;
				text-transform: none;
				padding-top: 5px;
			}
		}
	}
}


/* Ricerca Home */
#search-container {
	h2 {
		color: #686868;
		font-size: 36px;
		font-family: @font-default;
		font-weight: 700;
		margin-bottom: 30px;
	}

	.progress-bar-warning {
		color: #fff;
		padding: 3px;
		font-weight: 700;
		font-family: @font-default;
		margin-bottom: 30px;
	}
}